<template>
  <div>
    <!-- 轮播 -->
    <div class="swiper-box pd-20">
      <Swiper :list="swiperList"></Swiper>
    </div>
    <!-- 检索结果 -->
    <div class="flex flex-sb flex-w goods-list">
        <div class="goods-item flex-none mb-15" v-for="(item,index) in goodsList" :key="index" @click="$router.push({name:'functionalAFunctionThree',params:{id:index}})">
          <div class="item-img-box">
            <el-image style="width: 100%; height: 100%" :src="item.img" fit="fill"></el-image>
          </div>
          <div class="item-name t-c mt-5">
            {{item.name}}
          </div>
        </div>
    </div>
  </div>
</template>
  
<script>
import chuan from '@/assets/img/chuan.jpg';
import yue from '@/assets/img/yue.jpg';
import Swiper from '@/components/swiper.vue';
export default {
  name: 'AfunctionTwo',
  components:{Swiper},
  data() {
    return {
      swiperList: [chuan, yue],
      goodsList:[
        {
          name:'箭那就是静安寺贷记卡计师单声道阿萨大大阿松大阿萨',
          img:chuan
        },
        {
          name:'菜品名称氨基酸大几十年大说你肯定拿手机但会计师单声道',
          img:yue
        },
        {
          name:'菜品名称氨基酸大几十年大说你肯定拿手机但会计师单声道',
          img:chuan
        },
        {
          name:'菜品名称氨基酸大几十年大说你肯定拿手机但会计师单声道',
          img:chuan
        },
        {
          name:'菜品名称氨基酸大几十年大说你肯定拿手机但会计师单声道',
          img:yue
        }
      ]
    }
  },
  methods: {
  }
}
</script>
  
<style scoped>
.goods-list{
  padding: 00px 80px;
}
.item-img-box{
  width: 450px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
}
</style>
  